<template>
  <div class="w-100">
    <div v-for="(item,index) in dataList" :key="index">
      <el-form label-width="70px">
        <el-row :gutter="20">
          <el-col class="d-flex" :span="12">
            <div class="titleClass">{{"控制"+item.seq}}</div>
            <el-form-item class="flex-2" label="设备">
              <el-select v-model="item.deviceCode" filterable class="w-100" @change="deviceChange($event,index)">
                <el-option
                  v-for="itemY in deviceDataList"
                  :key="itemY.deviceCode"
                  :label="itemY.deviceName"
                  :value="itemY.deviceCode+'&'+itemY.modelCode"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="控制参数">
              <el-select v-model="item.controlParam" filterable class="w-100">
                <el-option
                  v-for="itemY in item.controlDataList"
                  :key="itemY.controlParam"
                  :label="itemY.controlParamName"
                  :value="itemY.controlParam"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
  import {
    queryListByDevice
  } from "@/api/dataInsertConfig/internetOfThingsDevice"

  import {
    queryBaseControlParamList
  } from "@/api/systemBuilding/layout"

  export default {
    props: {
      dataList: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        deviceDataList: [],
        controlDataList: []
      }
    },
    watch: {
      dataList: {
        immediate: true, // 立即触发一次监听器，以便处理初始值
        handler(newVal) {
          if (Array.isArray(newVal) && newVal.length > 0) {
            for (let i = 0; i < newVal.length; i++) {
              const item = newVal[i]
              if (item.deviceCode) {
                item.deviceCode = item.deviceCode + "&" + item.modelCode
                item.controlDataList = []
              }
            }
          } else {
            console.log("No items available.")
          }
        }
      }
    },
    created() {
      this.queryListByDevice()
      this.queryBaseControlParamList()
    },
    mounted() {

    },
    methods: {
      queryListByDevice() {
        queryListByDevice({ deviceCom: "0" }).then(res => {
          this.deviceDataList = res.object
        })
      },
      queryBaseControlParamList() {
        queryBaseControlParamList().then(res => {
          this.controlDataList = res.object

          for (let i = 0; i < this.dataList.length; i++) {
            const item = this.dataList[i]
            if(item.deviceCode) {
              this.deviceChange(item.deviceCode, i)
            }
          }
        })
      },

      deviceChange(val, index) {
        let arrStr = val.split("&")
        let modelCode = arrStr[1]

        let isWarning = true
        for (let i = 0; i < this.controlDataList.length; i++) {
          if (this.controlDataList[i].modelCode == modelCode) {
            this.dataList[index].controlDataList = this.controlDataList[i].controlParamList
            isWarning = false
            break
          } else {
            isWarning = true
          }
        }
        if (isWarning) {
          this.dataList[index].deviceCode = ""
          this.dataList[index].controlParam = ""
          this.dataList[index].controlDataList = []
          this.$message({
            message: "警告哦，这是一条警告消息",
            type: "warning"
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .titleClass {
    width: 45px;
    font-size: 16px;
    font-weight: 500;
    color: #000000;
    line-height: 37px;
  }
</style>
